<template>
  <el-card class="patient-card" v-loading="loading">
    <h2>患者基本信息</h2>
    <div v-if="patient" class="patient-info">
      <el-row>
        <el-col :span="12">
          <p><strong>姓名:</strong> {{ patient.name }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>年龄:</strong> {{ patient.age }}</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <p><strong>性别:</strong> {{ patient.gender === 1 ? '男' : '女' }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>所在医院:</strong> {{ patient.hospital }}</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <p><strong>癌种:</strong> {{ patient.cancerType }}</p>
        </el-col>
        <el-col :span="12">
          <p><strong>免疫用药情况:</strong> {{ patient.immunotherapyMedication }}</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <p><strong>第一次取样时间:</strong> {{ formattedDate(patient.firstSamplingDate) }}</p>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getPatientById } from '../../api/patient';
import { Patient } from '../types';

const route = useRoute();
const patient = ref<Patient | null>(null);
const loading = ref(true);

const fetchPatient = async () => {
  const pid = route.params.patientId as string;

  try {
    const response = await getPatientById(Number(pid));
    patient.value = response.data;
  } catch (error) {
    console.error('Error fetching patient data:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(fetchPatient);

const formattedDate = (date: Date | null) => {
  if (!date) return '';
  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
  return new Date(date).toLocaleDateString(undefined, options);
};


</script>

<style scoped>
.patient-card {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.patient-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.patient-info p {
  margin: 0;
  font-size: 16px;
}

.patient-info p strong {
  color: #333;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
}
</style>
